<template>
<div class="cardbg_ntp">
    <n-space justify="center">
      <n-button @click="ct.sw('info')">信息日志</n-button>
      <n-button @click="ct.sw('error')">失败日志</n-button>
    </n-space>
    <n-hr />
    <div class="dljjc_box3">
    <n-log ref="logInstRef" :log="val.infolog" language="naive-log" trim />
    </div>
</div>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";

export default defineComponent({
  setup() {
    let ct = reactive({});
    let val = reactive({
      infolog: ``,
      def: "info",
      timer: null,
      nextid: null,
    });

    ct.sw = (type) => {
      val.infolog = "";
      val.def = type;
      ct.get_log("new");
      clearInterval(val.timer);
      val.timer = setInterval(() => {
        ct.get_log("next");
      }, 5000);
    };
    //获取日志
    ct.get_log = async (type2) => {
      const res = await cfg.axios.get(`${cfg.url}`, {
        params: {
          t: "v2/log/guild_log",
          type: `get_${val.def}`,
          type2: type2,
          nextid: val.nextid,
        },
      });
      const data = res.data.data;
      data.forEach((item) => {
        val.infolog += item.text + "\n";
        val.nextid = item.time;
      });
    };

    //循环更新日志
    ct.sw("info");

    const logInstRef = ref(null);

    onMounted(() => {
      watchEffect(() => {
        if (val.infolog) {
          nextTick(() => {
            logInstRef.value?.scrollTo({ position: "bottom", silent: true });
          });
        }
      });
    });

    onBeforeUnmount(() => {
      clearInterval(val.timer);
    });

    return {
      val,
      logInstRef,
      ct,
    };
  },
});
</script>
